<template>
    <!--  外框架-->
    <div class="framework1">
        <!--      内框架-->
        <div class="framework2">
            <div class="top-class-table">
                <div class="header">
                    <div style="margin-left: 10px;font-weight: bold">应用维护->操作日志</div>
                </div>
                <!--      按钮行-->
                <div class="button_group">
                    <div style="width: 380px">
                        <el-date-picker
                                style="margin-right: 15px"
                                v-model="searchData"
                                type="daterange"
                                range-separator="到"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD"
                        />
                    </div>
                    <el-input v-model="search" placeholder="用户名称/操作内容/用户IP"
                              style="width: 250px;margin-right: 15px"
                              clearable></el-input>

                    <el-button icon="Search" type="primary"
                               @click="load">搜索
                    </el-button>
                </div>
                <div style="height: calc(100vh - 134px)">
                    <el-table :data="tableData" :row-style="{ height: '47px' }"
                              style="width: 100%;height:calc(100% - 68px)"
                              :header-cell-style="{ background: '#f4f3f9' }">
                        <el-table-column prop="account" label="账号" width="180" align="center"/>
                        <el-table-column prop="username" label="用户名" width="180" align="center"/>
                        <el-table-column prop="content" label="操作内容" width="auto" align="center"/>
                        <el-table-column prop="userIp" label="用户IP" width="auto" align="center"/>
                        <el-table-column prop="createdTime" label="操作时间" width="auto" align="center"/>
                        <el-table-column prop="operateType" label="操作类型" width="auto" align="center"/>
                    </el-table>
                    <!--        页数导航栏-->
                    <div class="footer">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import {serverIp} from '@/ipConfig/config';

    export default {
        name: "OperateRecord",
        components: {
            serverIp
        },
        data() {
            return {
                currentData: {},
                tableData: [],
                searchData: [],
                search: "",
                currentPage: 1,
                pageSize: 10,
                total: 10,
            }
        },
        created() {
            this.load()
        },
        methods: {
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {  // 改变当前页码触发
                this.currentPage = pageNum
                this.load()
            },
            // 搜索及初始化
            load() {
                let startTime = "", endTime = ""
                if (this.searchData !== null && this.searchData.length !== 0) {
                    startTime = this.searchData[0]
                    endTime = this.searchData[1]
                }
                request.get("/record-operate/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&keyWord=" + this.search + "&startTime=" + startTime + "&endTime=" + endTime).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        this.$message.error("错误" + res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    #roleSpan {
        color: black;
        text-decoration: none;
    }

    /*   外框架   */
    .framework1 {
        height: calc(100vh - 88px);
        width: calc(100vh - 200px);
        margin-left: 8px;
        border: solid 1px #D3D3D3;
    }

    /*   内框架   */
    .framework2 {
        height: calc(100vh - 92px);
        border: solid 1px #D3D3D3;
    }

    /*   表格大标题   */
    .header {
        font-size: 16px;
        font-weight: bold;
        padding: 4px 20px;
        background-color: #D3D3D3;
    }

    /*   表格按键组   */
    .button_group {
        display: flex;
        padding: 4px 10px;
        background-color: #DDDDDD;
    }

    /*   表格分页处   */
    .footer {
        padding: 4px 10px;
        background-color: #f4f3f9;
    }

    .el-dialog-image {
        height: 100px;
        width: 200px;
        margin-top: 10px;
        margin-right: 10px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
